<template>
  <div class="eject-container" :style="`height: ${height}px`">
    <div class="eject-header-box">
      <div class="eject-header">
        <span class="header-li" :class="{ 'li-active': ejectFlag == 'status' }" @click="changeEject('status')">状态</span>
        <span class="header-li" :class="{ 'li-active': ejectFlag == 'roll' }" @click="changeEject('roll')">点名</span>
        <span class="header-li" :class="{ 'li-active': ejectFlag == 'voice' }" @click="changeEject('voice')">语音</span>
      </div>
      <div class="eject-header-icon" @click="toggleEjectHeight">
        <img class="header-icon" :class="{ 'icon-down': height != 32 }" src="@/assets/images/safety/arrow_up.png">
      </div>
    </div>

    <div class="eject-content">
      <!-- 状态信息内容 -->
      <div class="eject-status-box" v-show="ejectFlag == 'status'">
        <div class="status-li">
          <div>车牌号</div>
          <div>{{ vehicleData.plateNo ?? '' }}</div>
        </div>
        <div class="status-li">
          <div>自编号</div>
          <div>{{ vehicleData.numbered ?? '' }}</div>
        </div>
        <div class="status-li">
          <div>车辆类型</div>
          <div>{{ _vehicleType(vehicleData.vehicleType ?? '') }}</div>
        </div>
        <div class="status-li">
          <div>驾驶员</div>
          <div>{{ vehicleData.driverName ?? '' }}</div>
        </div>
        <div class="status-li">
          <div>速度</div>
          <div>{{ vehicleData.speed ?? '' }}km/s</div>
        </div>
        <div class="status-li">
          <div>所在区域</div>
          <div>{{ vehicleData.region ?? '' }}</div>
        </div>
        <div class="status-li">
          <div>设备编号</div>
          <div>{{ vehicleData.code ?? '' }}</div>
        </div>
        <div class="status-li">
          <div>当前状态</div>
          <div>{{ vehicleStatus(vehicleData.vehicleStatus ?? '') }}</div>
        </div>
      </div>

      <!-- 点名记录内容 -->
      <div class="eject-roll-box" v-show="ejectFlag == 'roll'">
        <div class="roll-content">
          <div class="roll-li">
            <div>2023-10-24 16:35:29</div>
            <div class="roll-color-red">未应答</div>
          </div>
          <div class="roll-li">
            <div>2023-10-24 16:35:29</div>
            <div class="roll-color-green">已应答</div>
          </div>
          <div class="roll-li">
            <div>2023-10-24 16:35:29</div>
            <div class="roll-color-green">已应答</div>
          </div>
        </div>
        <div class="roll-button">
          <el-button type="primary">发送</el-button>
        </div>
      </div>

      <!-- 语音对话内容 -->
      <div class="eject-voice-box" v-show="ejectFlag == 'voice'">
        <div class="voice-header">
          <el-radio-group v-model="voiceType">
            <el-radio label="1" size="small">对讲</el-radio>
            <el-radio label="2" size="small">监听</el-radio>
            <el-radio label="3" size="small">广播</el-radio>
          </el-radio-group>
        </div>
        <div class="voice-send">
          <div class="send2-icon"></div>
          <div class="send1-icon"></div>
          <div class="send-icon-bk">
            <img src="@/assets/images/safety/send_voice.png">
          </div>
        </div>
        <div class="voice-button">
          <el-button type="primary">开启</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="carEjectBox">
import useSatetyMapStore from '@/store/modules/safetyMap'
import { computed, watch } from 'vue';
const { proxy } = getCurrentInstance();
const { basic_vehicle_type } = proxy.useDict('basic_vehicle_type');
import { toDirStr, kmUnit, accStatus, onlineStatus, vehicleStatus } from '@/utils/utils.js'
const safeMapStore = useSatetyMapStore();
const emit = defineEmits(['handleTreeHeight'])
const props = defineProps(['vehicleData'])

//信息框切换tab事件
function changeEject(opt) {
  if (safeMapStore.currentSelectVehicleId == '') {
    proxy.$modal.msgError('请先选择已勾选的车辆');
    return false;
  }
  safeMapStore.setMapCarEjectFlag(opt)
}

//返回选中tab类别
const ejectFlag = computed(() => {
  return safeMapStore.mapCarEjectFlag
});

//返回地图marker点信息窗体的按钮选中类型
const ibtFlag = computed(()=>{
  return safeMapStore.setMapInfowWindowBtFlag
})

//监听选中tab类别
watch(ejectFlag, (newValue) => {
  //如果新值是状态status tab 且map信息窗体点击了点名或者语音按钮时 重置map信息窗体的flag值
  if (newValue == 'status' && (ibtFlag == 'roll')) {
    safeMapStore.setMapInfowWindowBtFlag('')
  }
})

const voiceType = ref('')

//返回车辆信息框高度
const height = computed(() => {
  return safeMapStore.treeEjectHeight
})

//显示隐藏车辆信息盒框
function toggleEjectHeight() {
  if (safeMapStore.currentSelectVehicleId == '') {
    proxy.$modal.msgError('请先选中车辆');
    return false;
  }
  let newHeight = height.value == 259 ? 32 : 259;
  safeMapStore.setTreeEjectHeight(newHeight)
  emit('handleTreeHeight', newHeight)
}

//判断车辆类型
var vehicleTypes = {}
function _vehicleType(key = '') {
  if (JSON.stringify(vehicleTypes) === '{}') {
    basic_vehicle_type.value.forEach((item) => {
      vehicleTypes['key_' + item.value] = item.label
    })
  }
  return vehicleTypes['key_' + key] ? vehicleTypes['key_' + key] : '';
}

</script>

<style lang="scss" scoped>
.eject-container {
  color: #ffffff;

  .eject-header-box {
    display: flex;
    align-items: center;
    background-color: #1C2F61;

    .eject-header {
      display: flex;

      .header-li {
        flex: 1;
        height: 32px;
        padding: 0 32px;
        display: flex;
        align-items: center;

        &:hover {
          cursor: pointer;
        }
      }

      .li-active {
        background-color: #668FF5;
      }
    }

    .eject-header-icon {
      margin-left: 5px;
      width: 14px;

      .header-icon {
        transition: .3s;

        &.icon-down {
          transform: rotate(180deg);
          transition: .3s;
        }
      }
    }

  }

  .eject-content {
    .eject-status-box {
      .status-li {
        height: 28px;
        align-items: center;
        display: flex;
        border-bottom: 1px solid #4E5A75;

        div {
          margin-left: 10px;

          &:first-child {
            width: 60px;
          }
        }
      }

      .status-li:last-child {
        border-bottom: none;
      }
    }

    .eject-roll-box {
      height: 190px;
      position: relative;

      .roll-content {

        .roll-li {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #4E5A75;
          padding: 0 10px;
          height: 28px;
          line-height: 28px;

          .roll-color-red {
            color: #F23333;
          }

          .roll-color-green {
            color: #4BD17A;
          }
        }
      }

      .roll-button {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: -30px;
        left: 10px;

        :deep(.el-button) {
          padding: 0 122px;
          font-size: 12px;
          height: 30px;
        }
      }

    }

    .eject-voice-box {
      .voice-header {
        display: flex;
        justify-content: center;
        padding: 15px 32px 0 32px;

        :deep(.el-radio) {
          color: #ffffff;
        }

        :deep(.el-radio__inner) {
          border-radius: 0;
          border: 1px solid #DBDBDB;
          background-color: #1C2F61;
        }
      }

      .voice-send {
        position: relative;
        height: 151px;

        .send2-icon {
          background-image: url('@/assets/images/safety/send_voice2.png');
          width: 130px;
          height: 82px;
          position: absolute;
          left: 80px;
          top: 32px;
        }

        .send1-icon {
          background-image: url('@/assets/images/safety/send_voice1.png');
          width: 112px;
          height: 94px;
          position: absolute;
          left: 89px;
          top: 26px;
        }

        .send-icon-bk {
          width: 95px;
          height: 95px;
          position: absolute;
          left: 98px;
          top: 26px;
          background: linear-gradient(0deg, #2B4BA2 0%, #668FF5 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;


        }
      }

      .voice-button {
        display: flex;
        justify-content: center;

        :deep(.el-button) {
          padding: 0 122px;
          font-size: 12px;
          height: 30px;
        }
      }
    }
  }
}
</style>